<template>
    <a-layout class="layout">
        <div>
            <a-layout>
                <a-layout-header class="layout-header">
                    <a-row>
                        <a-col :span="3">
                            <div style="height: 60px;width:200px;display: flex;align-items: center;justify-content: center;">
                                <img src="../assets/logo.png" width="36" height="36"/>
                            </div>
                        </a-col>
                        <a-col :span="9" style="height: 60px;display: flex;align-items: center;justify-content: left;">
                            <a-breadcrumb>
                                <a-breadcrumb-item>
                                    <router-link to="/home" @click="handleSelectHome">首页</router-link>
                                </a-breadcrumb-item>
                                <a-breadcrumb-item style="color: var(--color-neutral-8);">
                                    {{this.$route.name==='首页'?'':this.$route.name}}
                                </a-breadcrumb-item>
                            </a-breadcrumb>
                        </a-col>
                        <a-col :span="12">
                            <div style="display: flex;justify-content: right;align-items: center;height: 64px;padding: 0px 20px 0px 0px;">
                                <router-link to="/chat" @click="handleSelectHome">
                                    <a-badge :count="parseInt($store.state.globalDots)">
                                        <i :style="{color:'#fff',margin:'10px 10px',fontSize:'24px'}"
                                           class="fa fa-bell"></i>
                                    </a-badge>
                                </router-link>
                                <a-dropdown trigger="hover" @select="handleSelectDropDown">
                                    <a-avatar :size="48"
                                              :style="{ backgroundColor: '#ccc',display:'flex',justifyContent:'center',alignItems:'center' }"
                                              trigger-type="mask"
                                              @click="toast">
                                        <div style="width: 32px;height: 32px;"><img :src="user.userFace"
                                                                                    style="max-width: 100%;max-height: 100%;"/>
                                        </div>
                                        <template #trigger-icon>
                                            <i class="fa fa-edit"></i>
                                        </template>
                                    </a-avatar>
                                    <template #content>
                                        <a-doption value="adminInfo">个人中心</a-doption>
                                        <a-doption value="setting">设置</a-doption>
                                        <a-doption value="logout">注销登录</a-doption>
                                    </template>
                                </a-dropdown>
                            </div>
                        </a-col>
                    </a-row>
                </a-layout-header>
            </a-layout>
        </div>
        <a-layout>
            <a-layout-sider class="layout-sider" theme="dark" collapsible :collapsed="collapsed"
                            @collapse="toggleCollapse"
                            :width="menuWidth"
            >
                <div class="menu">
                    <a-menu :collapsed="collapsed"
                            :open-keys="openKeys" @sub-menu-click="handleOpenMenu"
                            :selected-keys="selectedKeys" @menu-item-click="handleClickMenuItem"
                    >
                        <template v-for="(item,index) in routes"
                                  :key="index">
                            <a-sub-menu v-if="!item.hidden" :key="item.path">
                                <template #icon>
                                    <i :class="item.iconCls"></i>
                                </template>
                                <template #title>{{item.name}}</template>
                                <a-menu-item v-for="child in item.children"
                                             :key="child.path" @click="this.$router.push(child.path)">
                                    {{child.name}}
                                </a-menu-item>
                            </a-sub-menu>
                        </template>
                    </a-menu>
                </div>
            </a-layout-sider>
            <a-layout>
                <a-layout-content class="layout-content" :style="{paddingLeft:`${menuWidth}px`}">
                    <router-view></router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script>
    import {
        IconMenuFold,
        IconMenuUnfold,
        IconApps,
        IconBug,
        IconBulb,
    } from '@arco-design/web-vue/es/icon';
    import {ref} from 'vue'

    export default {
        name: 'Home',
        components: {
            IconMenuFold,
            IconMenuUnfold,
            IconApps,
            IconBug,
            IconBulb,
        },
        data() {
            return {
                collapsed: false,
                user: JSON.parse(window.localStorage.getItem("user")),
                openKeys: [this.$route.matched[0].path],
                selectedKeys: [this.$route.path]
            }
        },
        computed: {
            routes() {
                return this.$store.state.routes
            },
            menuWidth() {
                return this.collapsed ? 48 : 200
            }
        },
        methods: {
            toast() {
                this.$message.info('修改头像')
            },
            handleSelectDropDown(value) {
                if (value === 'logout') {
                    this.$modal.warning({
                        title: '注销登录',
                        content: '您确定要注销吗?',
                        onOk: () => {
                            //退出登录
                            this.$post(this.requestUrl.logout.url)
                            //清空用户信息
                            window.localStorage.removeItem("token")
                            window.localStorage.removeItem("user")
                            //清空菜单
                            this.$store.commit('initRoutes', [])
                            this.$router.replace('/')
                        }
                    });
                } else if (value === 'adminInfo') {
                    this.$router.push('/admin/info')
                }
            },
            handleSelectHome() {
                this.openKeys = []
                this.selectedKeys = []
            },
            handleOpenMenu(key, openKeys) {
                this.openKeys = openKeys
            },
            handleClickMenuItem(key) {
                this.selectedKeys = [key]
            },
            toggleCollapse(collapsed) {
                this.collapsed = collapsed
            }
        },
        created() {
        }
    }
</script>
<style scoped lang="less">
    @nav-size-height : 60px;
    .menu {
        box-sizing: border-box;
        width: 100%;
    }

    .layout-header {
        background-color: var(--color-menu-dark-bg);
        border-bottom: 1px solid var(--color-neutral-4);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        width: 100%;
        height: @nav-size-height;
    }

    .layout-header .title {
        color: var(--color-neutral-4);
    }

    .layout {
        width: 100%;
        height: 100%;
    }

    .layout-sider {
        padding-top: @nav-size-height;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        height: 100%;
        transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

    }

    .layout-content {
        padding-top: @nav-size-height;
        overflow-y: hidden;
        /*background-color: var(--color-fill-2);*/
        transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
    }
</style>
